<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>中国地图下钻示例演示</title>
  <style>
    body {
      text-align: center;
    }
  </style>
</head>

<body>
  <!-- 阿里云 数据可视化平台 获取地图区域数据 -->
  <!-- https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5 -->

  <!-- 掘金 文档 -->
  <!-- https://juejin.cn/post/7345297984264863782 -->

  <!-- 主页面 -->
  <h3>地图下钻演示：<span style="font-size: 12px;color: red;">已支持所有省市下钻</span></h3>

  <div>
    <select name="请选择" id="select">
      <option value="province">省</option>
      <option value="city">市</option>
      <option value="district">区/县</option>
    </select>
    <input type="text" placeholder="请输入省/市/区code" id="input">
    <button id="'button" onclick="handleClick(event)">渲染区域数据</button>
  </div>
  <a id="back" href="javascript:;" style="display: none">返回上一级别</a>

  <div id="main" style="height: 800px"></div>
  <script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.js"></script>
  <script src="https://cdn.staticfile.net/echarts/5.4.3/echarts.min.js"></script>
  <script>
    var myChart = echarts.init(document.getElementById("main"));
    var mapList = [];
    var selectVal = 'province';
    var inputVal = '';

    var select = document.getElementById("select");
    var input = document.getElementById("input");
    var button = document.getElementById("button");

    select.addEventListener('change', (e) => {
      selectVal = e.target.value;
    });

    input.addEventListener('change', (e) => {
      inputVal = e.target.value;
    });

    function handleClick() {
      console.log(111, selectVal);
      console.log(222, inputVal);
      if (selectVal && inputVal) {
        getJSON({ name, adcode: inputVal, level: selectVal }, function (data) {
          renderChart(name, data);
        });
      } else {
        alert("请输入code");
      }
    }

    // 返回按钮事件
    $("#back").on("click", function () {
      goBack();
    });
    // 获取原始地图json数据
    function getJSON({ name, adcode, level }, callback) {
      const suffix = level === "district" ? '' : '_full';
      const url = `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${adcode}${suffix}`;
      // const url = `../libs/geoJson/${adcode}_full.json`;
      $.getJSON(url, function (data) {
        callback(data);
        setBackbtn({ name, adcode });
      }).fail(function () {
        alert("无此区域地图显示，请查看其他区域！");
      });
    }
    // 设置返回策略
    function setBackbtn({ name, adcode }) {
      if (!mapList.map(o => o.adcode).includes(adcode)) {
        mapList.push({ name, adcode });
      }
      // 如果为中国地图，隐藏返回
      if (adcode === 100000) {
        $("#back").hide();
      } else {
        $("#back").show();
      }
      console.log(JSON.stringify(mapList));
    }
    // 点击返回，地图返回上一级
    function goBack() {
      if (mapList.length >= 2) {
        const { name, adcode } = mapList[mapList.length - 2];
        mapList.splice(-2, 2);
        getJSON({ name, adcode }, function (data) {
          renderChart(name, data);
        });
      }
    }
    // 初始化中国地图
    function initChinaMap() {
      mapList = [];
      getJSON({ name: "china", adcode: 100000 }, function (data) {
        renderChart("china", data);
      });
    }
    // 渲染地图
    function renderChart(name, data) {
      // 注册地图
      echarts.registerMap(name, data);
      // 根据 json 数据拼装 mapdata， 用于地图点击下钻时传递数据，主要有adcode、name
      const mapdata = data.features.map((item) => {
        return item.properties;
      });
      // 配置option
      setOption(name, mapdata);
    }
    // 设置地图option
    function setOption(name, data) {
      const option = {
        // tooltip 提示配置项
        tooltip: {
          formatter: function (params) {
            // 根据需要进行数据处理或格式化操作
            if (params && params.data) {
              const { adcode, name, level } = params.data;
              // 返回自定义的tooltip内容
              return `adcode: ${adcode}<br>name: ${name}<br>level: ${level}`;
            }
          },
        },
        // 地理坐标系组件用于地图的绘制
        geo: [
          {
            // 使用 registerMap 注册的地图名称。
            map: name,
            // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            roam: true,
            // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
            selectedMode: "single",
            label: {
              show: true,
              color: "#666666",
              fontSize: 8,
            },
            // 地图区域的多边形 图形样式。
            // itemStyle: {
            //   // 地图区域的颜色
            //   areaColor: "#71d5a1", // 绿色
            //   // 图形的描边颜色
            //   borderColor: "#2979ff", // 蓝色
            // },
            // 设置高亮状态下的多边形和标签样式
            emphasis: {
              // 设置区域样式
              itemStyle: {
                areaColor: "#ffff99", // 黄色
                borderColor: "#f29100", // 描边颜色黄色
              },
              // 设置字体
              label: {
                fontSize: 16, // 16px
                color: "#f29100", // 白色
              },
            },
          },
        ],
        series: [
          {
            type: "map",
            map: name,
            geoIndex: 0,
            roam: true,
            data: data,
          },
        ],
      };
      myChart.setOption(option, true);
    }
    // 设置地图点击事件
    myChart.on("click", function (params) {
      if (params.data) {
        const { adcode, name, level } = params.data;
        console.log('level: ', level);
        // if (level === "district") {
        //   alert("无此区域地图显示！");
        //   initChinaMap(); // 初始化中国地图
        //   return;
        // }
        getJSON({ name, adcode, level }, function (data) {
          renderChart(name, data);
        });
      }
    });
    // 初始化中国地图
    initChinaMap();
  </script>
</body>

</html>